<template>
	<view class="progress-container">
		<view class="page-top">
			<BackButton class="back-button"></BackButton>
			<view class="page-title">眼睛健康习惯状况</view>
		</view>
		<view class="content">
			<view class="chart-area">
				<view class="info">
					<view class="title">{{year}}年{{month}}月份第{{weekOfMonth}}周获得绿植量:</view>
					<view class="top flex">
						<view class="left">
							<view class="text">快去绿洲看看吧!</view>
							<image src="@/static/images/icon/img-arrow.png" mode="aspectFit"></image>
						</view>
						<view class="right flex">
							<text class="text">Weekly</text>
							<text class="icon cuIcon-unfold"></text>
						</view>
					</view>

				</view>
				<view class="weekly flex">
					<view v-for="(item, i) in weekTexts" class="day" :key="i">
						<view class="bar-box">
							<view class="bar"></view>
							<view class="current" :style="getStyle(i)"></view>
						</view>
						<image class="text" :src="weekTexts[i]" mode="aspectFit"></image>
					</view>
				</view>
				<view class="habits">
					<view class="top">
						<view class="check">检查眼睛健康习惯</view>
						<view class="today">今天完成了几个?</view>
						<view class="edit" @tap="editHandle">{{ editing ? "确定" : "编辑"}}</view>
					</view>
					<view class="list">
						<view class="item" v-for="(item, i) in habits" :key="i">
							<Option class="item" @optionClicked="optionClickHandle(i, $event)" :content="item.content"
								:active="!!item.active" :icon="item.icon">
							</Option>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import BackButton from "@/components/BackButton"
	import Option from "./components/Option"
	import {
		getWeekOfMonth
	} from "@/utils/getWeekOfMonth.js"
	import icon1 from "@/static/images/icon/eye2.png"
	import icon2 from "@/static/images/icon/computer.png"
	import icon3 from "@/static/images/icon/eye.png"
	import icon4 from "@/static/images/icon/hand.png"
	import icon5 from "@/static/images/icon/sports.png"
	import day1 from "@/static/images/font/1.png"
	import day2 from "@/static/images/font/2.png"
	import day3 from "@/static/images/font/3.png"
	import day4 from "@/static/images/font/4.png"
	import day5 from "@/static/images/font/5.png"
	import day6 from "@/static/images/font/6.png"
	import day7 from "@/static/images/font/7.png"
	import {
		getWeekProgress,
		getTodayProgress,
		setTodayProgress
	} from '@/api/system/user'
	import {
		alarmReminder
	} from "@/utils/alarmReminder"

	export default {
		components: {
			Option,
			BackButton
		},
		onLoad: function() {
			getWeekProgress().then((res) => {
				if (res) {
					setTimeout(() => {
						this.weekly = res;
					}, 100);
				}
			});
			getTodayProgress().then((res) => {
				if (res) {
					this.todayData = res;
					res.eyeHealthHabits.forEach((item, i) => {
						this.habits[i].active = item;
					})
				}
			});
			alarmReminder()
		},
		data() {
			return {
				maxGreenPlants: 14,
				numZnMap: ["一", "二", "三", "四", "五", "六"],
				weekTexts: [day7, day1, day2, day3, day4, day5, day6],
				habits: [{
					content: "眼睛运动一天做两次以上",
					icon: icon1,
					active: false,
				}, {
					content: "长时间没有使用电子产品",
					icon: icon2,
					active: false,
				}, {
					content: "没有熬夜",
					icon: icon3,
					active: false,
				}, {
					content: "勤洗手，手脏不揉搓眼睛",
					icon: icon4,
					active: false,
				}, {
					content: "有足够的户外运动",
					icon: icon5,
					active: false,
				}],
				timestamp: new Date().getTime(),
				weekly: [],
				editing: false,
			}
		},
		computed: {
			weekOfMonth() {
				return this.numZnMap[getWeekOfMonth(this.timestamp) - 1];
			},
			year() {
				return new Date(this.timestamp).getFullYear();
			},
			month() {
				return new Date(this.timestamp).getMonth() + 1;
			}
		},
		methods: {
			getProgress(day) {
				if (day === 0) {
					day = 7;
				}
				let curDay;
				this.weekly.forEach((item, i) => {
					const itemDay = new Date(+item.date).getDay();
					if (itemDay + 1 === day) {
						curDay = item;
					}
				})
				if (!curDay) return 0;
				const greenPlants = Math.floor(curDay.totalTime / 60 / 3);
				if (greenPlants > this.maxGreenPlants) {
					return 100;
				}
				return Math.ceil(greenPlants / this.maxGreenPlants * 100);
			},
			getStyle(i) {
				const h = this.getProgress(i + 1);
				if (h) {
					return `height:${h}%`
				} else {
					return "opacity:0";
				}
			},
			editHandle() {
				if (this.editing) {
					console.log("已更新当天的数据");
					const data = {
						...this.todayData
					};
					data.date = this.timestamp;
					data.eyeHealthHabits = this.habits.map((item) => {
						return item.active
					});
					setTodayProgress(data);
				}
				this.editing = !this.editing;
			},
			optionClickHandle(index, active) {
				if (this.editing) {
					this.habits[index].active = active ? 1 : 0;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-image: url("@/static/images/background/6.eye.jpg");
		background-size: cover;
		padding-top: 80upx;
		height: 100vh;
	}

	.progress-container {
		// color: #1D1617;
		letter-spacing: 0.04em;

		.page-top {
			height: 70upx;
			line-height: 70upx;
			margin: 0 16px;
			position: relative;

			.back-button {
				position: absolute;
				left: 0;
				top: 0;
			}

			.page-title {
				text-align: center;
				font-size: 28upx;
				font-weight: bold;
				letter-spacing: 0.04em;
			}
		}

		.content {
			margin-top: 15upx;
			padding: 0 50upx;

			.chart-area {
				.info {
					.title {
						font-size: 30upx;
						font-weight: bold;
					}

					.top {
						margin-top: 6upx;
						justify-content: space-between;

						.left {
							.text {
								font-size: 28upx;
								font-weight: bold;
							}

							image {
								width: 200upx;
								height: 114upx;
							}
						}

						.right {
							width: 115upx;
							height: 48upx;
							line-height: 46upx;
							background-color: #05CA7E;
							border-radius: 100upx;
							color: #fff;
							margin-right: 20upx;
							margin-top: 93upx;

							.text {
								font-size: 14upx;
								padding-left: 18upx;
							}

							.icon {
								font-size: 22upx;
								margin-left: 8upx;
								margin-top: 2upx;
							}
						}
					}

				}

				.weekly {
					margin-top: 22upx;
					border-radius: 10px;
					padding-right: 10upx;
					text-align: center;
					justify-content: space-between;

					.day {

						.bar-box {
							position: relative;
							width: 54upx;
							height: 322upx;
							overflow: hidden;

							.bar {
								width: 100%;
								height: 100%;
								border: 4upx solid #fff;
								border-radius: 100upx;
								background-color: #FFF383;
							}

							.current {
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 0;
								border: 4upx solid #fff;
								border-radius: 100upx;
								background-color: #02C97D;
								transition: height 1s;
							}
						}

						.text {
							width: 24upx;
							height: 24upx;
							margin-top: 22upx;
						}
					}

				}

				.habits {
					margin-top: 92upx;

					.top {
						position: relative;

						.check {
							font-size: 32upx;
							font-weight: bold;
							letter-spacing: 0.04em;
						}

						.today {
							font-size: 22upx;
							color: #6D6A6A;
							margin-top: 5upx;
						}

						.edit {
							position: absolute;
							right: 20upx;
							bottom: 5upx;
							font-size: 14px;
							font-weight: bold;
							color: #02C97D;
							margin-top: 10px;
						}
					}

					.list {
						margin-top: 20px;
						margin-right: 16upx;

						.item {
							border-radius: 10px;
							margin-bottom: 8px;
						}
					}
				}
			}
		}
	}
</style>